<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="前端 | WEB | VUE">
<meta property="og:type" content="website">
<meta property="og:title" content="Storm">
<meta property="og:url" content="https://storm4542.github.io/page/4/index.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="前端 | WEB | VUE">
<meta property="og:locale" content="zh-CN">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Storm">
<meta name="twitter:description" content="前端 | WEB | VUE">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main">
  
    <article id="post-REM" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="151aa5a1.html">REM</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="151aa5a1.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="REM"><a href="#REM" class="headerlink" title="REM"></a>REM</h3><h4 id="1-各种单位"><a href="#1-各种单位" class="headerlink" title="1.各种单位"></a>1.各种单位</h4><ol>
<li><p>px 像素</p>
</li>
<li><p>em 一个M的宽度，跟自身的 font-size 相同</p>
</li>
<li><p>rem  <strong>根元素</strong>的 font-size</p>
</li>
<li><p>vh : viewport height 视口高度  100vh === 视口高度</p>
<p>vm: viewport width 视口宽度 100vw === 视口宽度</p>
</li>
</ol>
<h4 id="2-使用REM"><a href="#2-使用REM" class="headerlink" title="2.使用REM"></a>2.使用REM</h4><p>当我们要写一个适配手机的页面的时候，我们就会陷入这样蛋疼的境地。</p>
<p>因为各种品牌，各种型号的手机分辨率是不一样的，这就很蛋疼了。</p>
<p>这时候就使用REM来解决这个问题。</p>
<ol>
<li><p>REM始终为根元素(html)的 font-size 的值。</p>
</li>
<li><p>手机页面的宽度 width 是永远不变的。</p>
</li>
</ol>
<p>知道了上面两个前提，我们就可以做一些事情了。</p>
<ol>
<li>通过 width的值设置根元素的 font-size。</li>
<li>通过 REM 定义各种宽和高，这样就是永远适配当前页面宽度的。</li>
</ol>
<p>首先，添加 meta:viewport 标签</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>第二步，通过 width 计算根元素的font-size</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> $width = <span class="built_in">window</span>.outerWidth;</span><br><span class="line"><span class="built_in">document</span>.write(<span class="string">`&lt;style&gt;html&#123;font-size:<span class="subst">$&#123;$width<span class="regexp">/10&#125;px&#125;&lt;/</span>style&gt;<span class="string">`)</span></span></span></span><br></pre></td></tr></table></figure>
<p>P.S. 虽然这个 fontsize/n 中的 n  ,是你可以自己决定的，但不要忘记了 </p>
<ol>
<li><p>12px 原则，chrome浏览器会阻止你设置比 12px还小的字。</p>
</li>
<li><p>假如你换算出来的 px 太小，CSS会认为这是 0 或者 1。</p>
</li>
</ol>
<p>第三步，写CSS</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">height</span>:<span class="number">3rem</span>;</span><br><span class="line">    <span class="attribute">widht</span>:<span class="number">3rem</span>;</span><br><span class="line">    <span class="attribute">margin</span>:<span class="number">0</span> .<span class="number">5rem</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>通过上面的换算，我们可以知道</p>
<ol>
<li>根元素的 font-size = $width/10 ， 也就是 十分之一个屏幕的宽度。</li>
<li>所以 3rem === 十分之三个屏幕宽度。</li>
<li>所以，无论在什么环境下，它都永远等于十分之三个屏幕宽度。</li>
<li>因此，在每一个设备上的观看效果都相同。</li>
</ol>
<h4 id="3-使用sass"><a href="#3-使用sass" class="headerlink" title="3.使用sass"></a>3.使用sass</h4><p>每次都要计算，非常的麻烦，所以使用 sass 或者 less 帮我们计算。</p>
<p>安装sass</p>
<ul>
<li><p>npm config set registry <a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">https://registry.npm.taobao.org/</a></p>
</li>
<li><p>touch ~/.bashrc</p>
</li>
<li><p>echo ‘export SASS_BINARY_SITE=”<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">https://npm.taobao.org/mirrors/node-sass”‘</a> &gt;&gt; ~/.bashrc</p>
</li>
<li><p>source ~/.bashrc</p>
</li>
<li><p>npm i -g node-sass</p>
</li>
<li><p>mkdir ~/Desktop/scss-demo</p>
</li>
<li><p>cd ~/Desktop/scss-demo</p>
</li>
<li><p>mkdir scss css</p>
</li>
<li><p>touch scss/style.scss</p>
</li>
<li><p>start scss/style.scss</p>
</li>
<li><p>node-sass -wr scss -o css</p>
<p>编辑 scss 文件就会自动得到 css 文件</p>
</li>
</ul>
<figure class="highlight scss"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">@function px( <span class="variable">$px</span>) &#123;</span><br><span class="line">    @return <span class="variable">$px</span>/<span class="variable">$designWidth</span>*<span class="number">10</span>+rem;  </span><br><span class="line">    <span class="comment">//这里为啥✖️10呢，因为在上面我们除以10了，所以要计算出比例值需要✖️10</span></span><br><span class="line">    <span class="comment">//假设 屏幕宽度为 320px , 那么 root font-size:32px ,即 1rem === 32px ，把屏幕分成了10等份。</span></span><br><span class="line">    <span class="comment">//但是 设计稿宽度为 640px , 里面还有一个高度为 320px 的 div,</span></span><br><span class="line">    <span class="comment">//相对于设计稿,div的比例是 320/640=1/2 , 也就是占了5份的屏幕宽度 即为 5rem </span></span><br><span class="line">    <span class="comment">//所以 height : 5rem </span></span><br><span class="line">&#125;</span><br><span class="line">@designWidth:<span class="number">640</span>; <span class="comment">//根据设计稿的宽度来写。</span></span><br><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.child</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: px2rem(<span class="number">320</span>);;</span><br><span class="line">    <span class="attribute">height</span>: px2rem(<span class="number">160</span>);</span><br><span class="line">    <span class="attribute">margin</span>: px2rem(<span class="number">40</span>) px2rem(<span class="number">40</span>);</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-LESS" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="e523796b.html">LESS</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="e523796b.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="LESS"><a href="#LESS" class="headerlink" title="LESS"></a>LESS</h3><h4 id="1-LESS是什么"><a href="#1-LESS是什么" class="headerlink" title="1.LESS是什么"></a>1.LESS是什么</h4><p>LESS是一种<strong>动态</strong>样式语言。</p>
<p>LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。</p>
<h4 id="2-基本用法"><a href="#2-基本用法" class="headerlink" title="2.基本用法"></a>2.基本用法</h4><h5 id="1-变量"><a href="#1-变量" class="headerlink" title="1.变量"></a>1.变量</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@border-color:</span><span class="number">#fff</span>;</span><br><span class="line"><span class="selector-tag">div</span>&#123;<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="variable">@border-color</span>&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2-混合"><a href="#2-混合" class="headerlink" title="2.混合"></a>2.混合</h5><p>混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.classA</span> (<span class="variable">@radius</span>:<span class="number">5px</span>)&#123;<span class="attribute">border-radius</span>:<span class="variable">@radius</span>&#125;</span><br><span class="line"><span class="selector-class">.classB</span> &#123;<span class="selector-class">.classA</span>&#125;</span><br><span class="line"><span class="selector-class">.classC</span> &#123;<span class="selector-class">.classA</span>(<span class="number">10px</span>)&#125;</span><br></pre></td></tr></table></figure>
<p>@arguments变量 像写函数一样写CSS , 理解为JS里的 arguments 即可</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box-shadow</span>(<span class="variable">@x</span>:<span class="number">0</span> , <span class="variable">@y</span>:<span class="number">0</span> , <span class="variable">@blur</span>:<span class="number">1px</span>, <span class="variable">@color</span>:<span class="number">#666</span>)&#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>:<span class="variable">@arguments</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box-shadow</span>(<span class="number">1px</span>,<span class="number">2px</span>);  <span class="comment">// '调用函数'的感觉</span></span><br><span class="line"><span class="selector-class">.box-shadow</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">2px</span>,<span class="number">#888</span>)</span><br></pre></td></tr></table></figure>
<h5 id="3-嵌套"><a href="#3-嵌套" class="headerlink" title="3.嵌套"></a>3.嵌套</h5><p><strong>最常用的</strong></p>
<p>我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。(&amp;表示当前元素)</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.Parent</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">12px</span>;</span><br><span class="line">    &gt; <span class="selector-tag">h1</span>&#123; <span class="attribute">font-size </span>: inherit&#125;</span><br><span class="line">    &gt; <span class="selector-tag">input</span> &#123; </span><br><span class="line">        <span class="attribute">color</span>: black;</span><br><span class="line">        <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span>&#123; <span class="attribute">color</span>: red&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="4-函数-amp-amp-运算"><a href="#4-函数-amp-amp-运算" class="headerlink" title="4.函数&amp;&amp;运算"></a>4.函数&amp;&amp;运算</h5><p>运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@the-border:</span> <span class="number">1px</span>;</span><br><span class="line"><span class="variable">@base-color:</span> <span class="number">#111</span>;</span><br><span class="line"><span class="variable">@red:</span> <span class="number">#842210</span>;</span><br><span class="line"><span class="selector-id">#header</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@base-color</span> * <span class="number">3</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="variable">@the-border</span>;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="variable">@the-border</span> * <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#footer</span> &#123; </span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@base-color</span> + <span class="number">#003300</span>;</span><br><span class="line">  <span class="attribute">border-color</span>: desaturate(<span class="variable">@red</span>, <span class="number">10%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="5-引导"><a href="#5-引导" class="headerlink" title="5.引导"></a>5.引导</h5><p>当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。</p>
<p>为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//匹配模式和引导表达式</span></span><br><span class="line"><span class="selector-class">.min</span>(drak,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>: darken(<span class="variable">@color</span>,<span class="number">20%</span>);</span><br><span class="line">    <span class="comment">//将颜色加深20%</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.min</span>(light,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>: lighten(<span class="variable">@color</span>,<span class="number">20%</span>);</span><br><span class="line">    <span class="comment">//将颜色变浅20%</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.min</span>(<span class="variable">@_</span>,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable">@switch1:</span>drak;</span><br><span class="line"><span class="variable">@switch2:</span>light;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">span</span>&#123;</span><br><span class="line">    <span class="comment">//.min(@switch1,#ddd);</span></span><br><span class="line">    <span class="comment">//.min(drak,#ddd);@color:#ddd</span></span><br><span class="line">    <span class="comment">//.min(@switch2,#ddd);</span></span><br><span class="line">    <span class="comment">//@_,接受任意值，你传什么值他都会执行；</span></span><br><span class="line">    <span class="selector-class">.min</span>(<span class="variable">@word</span>,<span class="number">#ccc</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*---------------------------------*/</span></span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>:<span class="variable">@a</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*@a的color亮度大于50%的话*/</span></span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>)&gt;=<span class="number">50%</span>)&#123; </span><br><span class="line">    <span class="attribute">background-color</span>:black</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>)&lt;<span class="number">50%</span>)&#123;</span><br><span class="line">    <span class="attribute">background-color</span>:white</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.classA</span>&#123;<span class="selector-class">.mixin</span>(<span class="number">#ddd</span>)&#125;</span><br><span class="line"><span class="selector-class">.classB</span>&#123;<span class="selector-class">.mixin</span>(<span class="number">#555</span>)&#125;</span><br><span class="line"><span class="comment">//注释</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 注释</span></span><br><span class="line"><span class="comment"> * color函数</span></span><br><span class="line"><span class="comment"> * 1. lighten(@color,10%):</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% lighter than @color</span></span><br><span class="line"><span class="comment"> * 2. darken(@color,10%);</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% draker than @color</span></span><br><span class="line"><span class="comment"> * 3. statuate(@color,10%);//增加饱和度</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% statuated than @color</span></span><br><span class="line"><span class="comment"> * 4. destatuste(@color,10%);//减少饱和度，褪色</span></span><br><span class="line"><span class="comment"> * 5. fadein(@color,10%)</span></span><br><span class="line"><span class="comment"> * 6. fadeout(@color,10%)</span></span><br><span class="line"><span class="comment"> * 7. fade(@color,50%)</span></span><br><span class="line"><span class="comment"> * 8. spin(@color,10)</span></span><br><span class="line"><span class="comment"> * 9. spin(@color,-10)</span></span><br><span class="line"><span class="comment"> * 10. mix(@color1,@color2);混合</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 提取颜色信息</span></span><br><span class="line"><span class="comment"> * hue(@color):返回当前颜色的色调</span></span><br><span class="line"><span class="comment"> * staturation(@color):返回当前颜色的饱和度</span></span><br><span class="line"><span class="comment"> * lightness(@color):返回当前颜色的亮度(浅的度数)</span></span><br><span class="line"><span class="comment"> * */</span></span><br></pre></td></tr></table></figure>
<p>得到</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.classA</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: black;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ddd</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.classB</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: white;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#555</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="6-计算功能"><a href="#6-计算功能" class="headerlink" title="6.计算功能"></a>6.计算功能</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//计算功能：任何颜色，变量都可以参与运算</span></span><br><span class="line"><span class="variable">@base:</span><span class="number">5%</span>;</span><br><span class="line"><span class="variable">@filter:</span><span class="variable">@base</span>*<span class="number">2</span>;<span class="comment">//10%</span></span><br><span class="line"><span class="variable">@other:</span><span class="variable">@base</span>*<span class="number">4</span>+<span class="variable">@filter</span>;<span class="comment">//30%</span></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FFFF00</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="variable">@filter</span>+<span class="number">#111</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>/<span class="number">2</span>+<span class="variable">@other</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable">@var:</span><span class="number">10px</span> + <span class="number">5</span>;</span><br><span class="line"><span class="selector-id">#box1</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: (<span class="variable">@var</span> + <span class="number">20</span>)*<span class="number">2</span>;</span><br><span class="line">    <span class="attribute">height</span>: (<span class="variable">@var</span> - <span class="number">5</span>)*<span class="number">3</span>;</span><br><span class="line">    <span class="selector-tag">p</span>&#123;</span><br><span class="line">        <span class="attribute">height</span>: (<span class="variable">@var</span> + <span class="number">5</span>)/<span class="number">2</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#101010</span>+<span class="number">#000111</span>;</span><br><span class="line">        <span class="attribute">border</span>: <span class="variable">@var</span> - <span class="number">5</span> solid <span class="number">#0000ff</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//less也支持部分Math函数</span></span><br><span class="line"><span class="comment">//round(1.67)-&gt;2</span></span><br><span class="line"><span class="comment">//ceil(2.1)-&gt;3</span></span><br><span class="line"><span class="comment">//floor(2.9)-&gt;2</span></span><br><span class="line"><span class="comment">//peercentage(0.5)-&gt;50%转为百分数的函数</span></span><br><span class="line"><span class="selector-id">#s</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: percentage(<span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="7-Import-amp-amp-字符串插值"><a href="#7-Import-amp-amp-字符串插值" class="headerlink" title="7.Import &amp;&amp; 字符串插值"></a>7.Import &amp;&amp; 字符串插值</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">import 'lib.less'</span><br><span class="line">import 'lib' //可省略后缀名</span><br><span class="line"></span><br><span class="line">import 'lib.css' //引入一个CSS，并且不让LESS对它进行处理</span><br><span class="line"></span><br><span class="line"><span class="variable">@baseURL</span> = <span class="string">'http://storm4542.github.com'</span></span><br><span class="line">body&#123;<span class="attribute">background</span>: url(<span class="string">"@&#123;baseURL&#125;/image/bg.jpg"</span>)&#125;  <span class="comment">//类似JS 的 $&#123;xxx&#125;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-移动页面" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="3e92ca77.html">移动页面开发</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="3e92ca77.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="移动页面"><a href="#移动页面" class="headerlink" title="移动页面"></a>移动页面</h3><h4 id="1-移动页面的区别"><a href="#1-移动页面的区别" class="headerlink" title="1.移动页面的区别"></a>1.移动页面的区别</h4><ol>
<li><p>没有 hover</p>
</li>
<li><p>没有 touch</p>
</li>
<li><p>没有 resize</p>
</li>
<li><p>没有 滚动条</p>
</li>
<li><p>要加一个</p>
<p><code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;</code></p>
</li>
<li><p>会用  media query</p>
</li>
</ol>
<h4 id="2-媒体查询"><a href="#2-媒体查询" class="headerlink" title="2.媒体查询"></a>2.媒体查询</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* wdith&gt;=320px */</span></span><br><span class="line">@<span class="keyword">media</span> (min-width : <span class="number">320px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">body</span>&#123;</span><br><span class="line">        <span class="attribute">background</span>: red</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* wdith&gt;=375px */</span></span><br><span class="line">@<span class="keyword">media</span> (min-width : <span class="number">375px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">body</span>&#123;</span><br><span class="line">        <span class="attribute">background</span>: orange</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* wdith&gt;=425px */</span></span><br><span class="line">@<span class="keyword">media</span> (min-width : <span class="number">425px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">body</span>&#123;</span><br><span class="line">        <span class="attribute">background</span>: yellow</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* wdith&gt;=768px */</span></span><br><span class="line">@<span class="keyword">media</span> (min-width : <span class="number">768px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">body</span>&#123;</span><br><span class="line">        <span class="attribute">background</span>: green</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* wdith&gt;=769px */</span></span><br><span class="line">@<span class="keyword">media</span> (min-width : <span class="number">769px</span>)&#123;</span><br><span class="line">    <span class="selector-tag">body</span>&#123;</span><br><span class="line">        <span class="attribute">background</span>: blue</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>语法 @media(条件)</p>
<p>注意：</p>
<ol>
<li>上面的条件使用<code>min-width</code>，假如使用<code>max-width</code>，在<code>width=768</code>之内的时候都是绿色，因为他们都符合条件，根据CSS的语法，谁在后面谁起作用。</li>
<li>假如非要用<code>max-wdith</code>可以反过来写。大的在前面。</li>
<li>或者条件复杂一些<code>@media(min-width:375px) and (max-width:424px)</code></li>
</ol>
<p>你也可以写多个CSS文件，在 link 标签中限定条件</p>
<p><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;./mobile-style.css&quot; media=&quot;(max-width:452px)&quot;&gt;</code></p>

      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-设计模式" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="beed3124.html">一些常用的设计模式</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="beed3124.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="总结一些写轱辘的时候使用的设计模式（套路）"><a href="#总结一些写轱辘的时候使用的设计模式（套路）" class="headerlink" title="总结一些写轱辘的时候使用的设计模式（套路）"></a>总结一些写轱辘的时候使用的设计模式（套路）</h3><h4 id="1-发布订阅模式"><a href="#1-发布订阅模式" class="headerlink" title="1.发布订阅模式"></a>1.发布订阅模式</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">vm.$emit(<span class="string">'update:selected'</span>,<span class="keyword">this</span>.name) <span class="comment">//发布</span></span><br><span class="line">vm.$on(<span class="string">'update:selected'</span>,(name)=&gt;&#123;<span class="keyword">this</span>.name = name&#125;) <span class="comment">//订阅</span></span><br><span class="line">vm.$off(<span class="string">'update:selected'</span>) <span class="comment">//取消订阅</span></span><br></pre></td></tr></table></figure>
<h4 id="2-单项数据流"><a href="#2-单项数据流" class="headerlink" title="2.单项数据流"></a>2.单项数据流</h4><p>使用eventBus</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//父亲</span></span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  data()&#123;<span class="keyword">return</span> &#123; <span class="attr">selected</span>: <span class="number">1</span> &#125;&#125;</span><br><span class="line">&#125;)</span><br><span class="line">vm.eventBus.$emit(<span class="string">'update:selected'</span>, <span class="keyword">this</span>.selected)  <span class="comment">//给儿子说，我给你传个现在最新的selected</span></span><br><span class="line">vm.eventBus.$on(<span class="string">'update:selected'</span>,(selected)=&gt;&#123; <span class="keyword">this</span>.selected = selected &#125;) </span><br><span class="line"><span class="comment">//监听儿子有没有让我修改selected</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//儿子</span></span><br><span class="line"><span class="keyword">let</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  data()&#123;<span class="keyword">return</span> &#123; <span class="attr">selected</span>: <span class="number">2</span> &#125;&#125;</span><br><span class="line">&#125;)</span><br><span class="line">vm.eventBus.$emit(<span class="string">'update:selected'</span>,<span class="keyword">this</span>.selected) <span class="comment">//给爸爸说一声，我想修改一下 selected的值</span></span><br><span class="line">vm.eventBus.$on(<span class="string">'update:selected'</span>,(selected)=&gt;&#123;<span class="keyword">this</span>.selected = selected&#125;) </span><br><span class="line"><span class="comment">//监听爸爸有没有 同意 或者 让 我改selected</span></span><br></pre></td></tr></table></figure>
<p>流程:  爸爸修改儿子数据 —–&gt; 直接告诉儿子</p>
<p>​       儿子想修改自己的数据  —–&gt; 告诉爸爸想要修改 ——&gt; 爸爸修改数据 —–&gt; 告诉儿子</p>
<p>让爸爸始终掌控大局。</p>
<h4 id="3-正交原则"><a href="#3-正交原则" class="headerlink" title="3.正交原则"></a>3.正交原则</h4><p>props 不要违反正交原则</p>
<p>例如,我们设计一个button组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">props:[<span class="string">'rightIcon'</span>,<span class="string">'leftIcon'</span>]</span><br></pre></td></tr></table></figure>
<p>这两个属性就是不正交的，他们都可以改变icon的位置</p>
<p>修改</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">props:[<span class="string">'iconPosition'</span>]  <span class="comment">// right || left</span></span><br></pre></td></tr></table></figure>
<h4 id="4-写可测试的代码"><a href="#4-写可测试的代码" class="headerlink" title="4.写可测试的代码"></a>4.写可测试的代码</h4>
      

      
        
    </div>
  </div>
  
</article>



  
    <article id="post-Vuex笔记" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="db4c4335.html">Vuex</a>
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="db4c4335.html" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a>Vuex</h3><h4 id="1-Vuex是什么？"><a href="#1-Vuex是什么？" class="headerlink" title="1.Vuex是什么？"></a>1.Vuex是什么？</h4><blockquote>
<p>Vuex 是一个专为 Vue.js 应用程序开发的<strong>状态管理模式</strong>。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 </p>
<p>Vuex 使用<strong>单一状态树</strong>——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (<a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">SSOT</a>)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。</p>
<p>单状态树和模块化并不冲突</p>
</blockquote>
<h4 id="2-安装并配置好Vuex"><a href="#2-安装并配置好Vuex" class="headerlink" title="2.安装并配置好Vuex"></a>2.安装并配置好Vuex</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//main.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> stroe <span class="keyword">from</span> <span class="string">'./store'</span> <span class="comment">//引用文件夹即可，不用定位到文件</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el:<span class="string">'#app'</span>,</span><br><span class="line">    store</span><br><span class="line">    <span class="comment">//......</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p><strong>将 store 对象提供给store选项，可以把 store 的实例注入到所有组件</strong></p>
<p>我这里没有使用Vuex文档上的方式，我把store放到了一个单独的文件夹里。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store/index.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex);</span><br></pre></td></tr></table></figure>
<p>可以看到我们在index.js里使用了<code>Vue.use(Vuex)</code>，这表明Vuex本质上来说是一个插件，里面有<code>install</code>方法。</p>
<h4 id="3-State"><a href="#3-State" class="headerlink" title="3.State"></a>3.State</h4><p>state 可以理解为组件中的  data , 用于存储各种原始数据。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// store/index.js</span></span><br><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">'vue'</span></span><br><span class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line">Vue.use(Vuex);</span><br><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    isNum:<span class="literal">true</span>,</span><br><span class="line">    BookList:&#123;</span><br><span class="line">        book1:&#123;<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>:<span class="string">'莎士比亚'</span>&#125;,</span><br><span class="line">        book2:&#123;<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">name</span>:<span class="string">'哈姆雷特'</span>&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">    state</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在组件中使用Vuex</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// component/book.vue</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;p v-for=&quot;item of $store.state.BookList&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">            &#123;&#123;item.name&#125;&#125;</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import store from &quot;../../store/index&quot;;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&apos;book&apos;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>因为我们注入过 <code>store</code>，所以<code>$store.state.BookList</code>可以访问到state</p>
<p><strong>也可以通过 <code>computed</code>获取数据</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;p v-for=&quot;item of booklist&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">            &#123;&#123;item.name&#125;&#125;</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import store from &quot;../../store/index&quot;;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&apos;book&apos;,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        booklist()&#123;</span><br><span class="line">            return  this.$store.state.BookList</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>假如我有很多数据，那么用上面这种方法就会使代码变得很长很难看，所以推荐使用<code>mapstate</code>辅助函数。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">import store from &quot;../../store/index&quot;;</span><br><span class="line">import &#123;mapState&#125; from &apos;vuex&apos;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&apos;book&apos;,</span><br><span class="line">    computed:mapState(&#123;</span><br><span class="line">        booklist:state=&gt;state.BookList</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>加入你的<code>computed</code>中的属性和<code>state</code>中的名字相同，那就而可以更方便了。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"> &lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;p v-for=&quot;item of BookList&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">            &#123;&#123;item.name&#125;&#125;</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import store from &quot;../../store/index&quot;;</span><br><span class="line">import &#123;mapState&#125; from &apos;vuex&apos;</span><br><span class="line">export default &#123;</span><br><span class="line">    name:&apos;book&apos;,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        ...mapState([&apos;BookList&apos;])</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;xxxxxxxxxx &lt;script&gt;import store from &quot;../../store/index&quot;;import &#123;mapState&#125; from &apos;vuex&apos;export default &#123;    name:&apos;book&apos;,    computed:mapState(&#123;        booklist:state=&gt;state.BookList    &#125;)&#125;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>… ：对象展开运算符 — ES6的新语法</p>
<h4 id="4-Getter"><a href="#4-Getter" class="headerlink" title="4.Getter"></a>4.Getter</h4><p>有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">computed: &#123;</span><br><span class="line">  doneTodosCount () &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.$store.state.todos.filter(<span class="function"><span class="params">todo</span> =&gt;</span> todo.done).length</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。</p>
<p>Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。</p>
<p>Getter 接受 state 作为其第一个参数。</p>
<p>现在我修改一下<code>state</code>,如果我们想找所有还在的书籍，就需要用到<code>getter</code>了</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> state = &#123;</span><br><span class="line">    isNum:<span class="literal">true</span>,</span><br><span class="line">    BookList:[</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">1</span>,<span class="attr">name</span>:<span class="string">'莎士比亚'</span>,<span class="attr">ishave</span>:<span class="literal">true</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">2</span>,<span class="attr">name</span>:<span class="string">'哈姆雷特'</span>,<span class="attr">ishave</span>:<span class="literal">true</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">3</span>,<span class="attr">name</span>:<span class="string">'西游记'</span>,<span class="attr">ishave</span>:<span class="literal">false</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">4</span>,<span class="attr">name</span>:<span class="string">'红楼梦'</span>,<span class="attr">ishave</span>:<span class="literal">true</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">5</span>,<span class="attr">name</span>:<span class="string">'三国'</span>,<span class="attr">ishave</span>:<span class="literal">false</span>&#125;,</span><br><span class="line">        &#123;<span class="attr">id</span>:<span class="number">6</span>,<span class="attr">name</span>:<span class="string">'射雕'</span>,<span class="attr">ishave</span>:<span class="literal">true</span>&#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> getters = &#123;</span><br><span class="line">    findBook:<span class="function">(<span class="params">state</span>)=&gt;</span><span class="function">(<span class="params">ishave</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> state.BookList.filter(<span class="function"><span class="params">book</span>=&gt;</span>book.ishave===ishave)</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">/*</span></span><br><span class="line"><span class="comment">     //上面的写法等价于，就是返回一个函数</span></span><br><span class="line"><span class="comment">       findBook:(state)=&gt;&#123;</span></span><br><span class="line"><span class="comment">        return (ishave)=&gt;&#123;</span></span><br><span class="line"><span class="comment">            return state.BookList.filter(book=&gt;book.ishave===ishave)</span></span><br><span class="line"><span class="comment">        &#125;</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">     changeNum:<span class="function">(<span class="params">state</span>)=&gt;</span>&#123;</span><br><span class="line">        state.isNum = <span class="literal">false</span></span><br><span class="line">    &#125;,</span><br><span class="line">    booksCount:<span class="function">(<span class="params">state</span>)=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> state.BookList.length</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>组件中使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;h3&gt;所有的书&lt;<span class="regexp">/h3&gt;</span></span><br><span class="line"><span class="regexp">        &lt;p v-for="item of BookList" :key="item.id"&gt;</span></span><br><span class="line"><span class="regexp">            &#123;&#123;item.name&#125;&#125;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>p&gt;</span><br><span class="line">        &lt;h3&gt;现在还存在的书&lt;<span class="regexp">/h3&gt;</span></span><br><span class="line"><span class="regexp">        &lt;p v-for="item of findBook" :key="item.id"&gt;</span></span><br><span class="line"><span class="regexp">            &#123;&#123;item.name&#125;&#125;</span></span><br><span class="line"><span class="regexp">        &lt;/</span>p&gt;</span><br><span class="line">    &lt;<span class="regexp">/div&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">"../../store/index"</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;mapState,mapGetters&#125; <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">'book'</span>,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        ...mapState([<span class="string">'BookList'</span>]),</span><br><span class="line">        findBook()&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters.findBook(<span class="literal">true</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
<p>同样 getter 也有简写,上面的因为我们要传参，所以不能简写，getter 的简写形式和 state 差不多</p>
<p><code>...mapGetters([&#39;xxx&#39;])</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123;mapState,mapGetters&#125; <span class="keyword">from</span> <span class="string">'vuex'</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">'book'</span>,</span><br><span class="line">    computed:&#123;</span><br><span class="line">        ...mapState([<span class="string">'BookList'</span>,<span class="string">'isNum'</span>]),</span><br><span class="line">        findBook()&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">this</span>.$store.getters.findBook(<span class="literal">true</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        ...mapGetters([<span class="string">'booksCount'</span>])</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>如果想起一个别的名字</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">...mapGetters(&#123;</span><br><span class="line">    bookcount:<span class="string">'booksCount'</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="5-Mutation"><a href="#5-Mutation" class="headerlink" title="5.Mutation"></a>5.Mutation</h4><blockquote>
<p>更改 Vuex 的 store 中的状态的<strong>唯一方法</strong>是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 <strong>事件类型 (type)</strong> 和 一个 <strong>回调函数 (handler)</strong>。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数</p>
</blockquote>
<p><strong>注意: Mutation必须是同步函数，目的是让 vue的devtool里方便捕捉</strong></p>
<p>简单的来说，这就相当于Vue实例中的methods,修改东西，就要靠他commit.</p>
<p>我现在想要加一个给每个书籍增加数量的功能，就要使用mutations了。</p>
<p>在index.js里的mutations对象里写好逻辑，通过书名增加数量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//index.js</span></span><br><span class="line"><span class="keyword">const</span> mutations = &#123;</span><br><span class="line">    addBookNum(state,books)&#123;  <span class="comment">//books = &#123;name:'xxx',addNum:xx&#125;</span></span><br><span class="line">        <span class="keyword">let</span> thebook = state.BookList.filter(<span class="function"><span class="params">book</span>=&gt;</span>book.name === books.name);</span><br><span class="line">        thebook[<span class="number">0</span>].number+= books.addNum</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>然后在book.vue里提交，注意，mutations的方法写在methods里</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;h3&gt;所有的书&lt;/h3&gt;</span><br><span class="line">        &lt;p v-for=&quot;item of BookList&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">            &#123;&#123;item.name&#125;&#125;, 还有 &#123;&#123;item.number&#125;&#125;本</span><br><span class="line">            &lt;button @click=&quot;addBook(&#123;name:item.name,addNum:1&#125;)&quot;&gt;增加1本书&lt;/button&gt;</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">        &lt;h3&gt;现在可以借走的书&lt;/h3&gt;</span><br><span class="line">        &lt;p v-for=&quot;item of findBook&quot; :key=&quot;item.id&quot;&gt;</span><br><span class="line">            &#123;&#123;item.name&#125;&#125; , 还有 &#123;&#123;item.number&#125;&#125;本</span><br><span class="line">        &lt;/p&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    import store from &quot;../store/index&quot;;</span><br><span class="line">    import &#123;mapState,mapGetters&#125; from &apos;vuex&apos;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name:&apos;book&apos;,</span><br><span class="line">        computed:&#123;</span><br><span class="line">            ...mapState([&apos;BookList&apos;]),</span><br><span class="line">            findBook()&#123;</span><br><span class="line">                return this.$store.getters.findBook(true)</span><br><span class="line">            &#125;,</span><br><span class="line">            ...mapGetters([&apos;booksCount&apos;])</span><br><span class="line">        &#125;,</span><br><span class="line">        methods:&#123;</span><br><span class="line">            addBook(options)&#123;</span><br><span class="line">                this.$store.commit(&apos;addBookNum&apos;, options)  //&#123;name:&apos;莎士比亚&apos;,addNum:200&#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>这样，每一个后面就都加上了一个按钮，并且可以增加书籍的数量。</p>
<p>Vue的作者建议，使用常量代替Mutaions事件类型。具体使用看文档，这里就不写了。</p>
<p><strong>在组件提交的方式</strong></p>
<ol>
<li><p><code>this.$store.commit( &#39;fn&#39; , playload)</code></p>
</li>
<li><p>如果不需要传参数可以使用 <code>mapMutations</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    ...mapMutations([</span><br><span class="line">        <span class="string">'addBook'</span>, <span class="comment">//把this.addBook()映射为 this.$store.commit('addBook')</span></span><br><span class="line">        <span class="string">'removeBook'</span></span><br><span class="line">    ]),</span><br><span class="line">     ...mapMutations(&#123;</span><br><span class="line">            add:<span class="string">'addBook'</span> <span class="comment">// 把 this.add() 映射为 this.$store.commit('addBook')</span></span><br><span class="line">        &#125;)</span><br><span class="line">       </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h4 id="6-Action"><a href="#6-Action" class="headerlink" title="6.Action"></a>6.Action</h4><p>刚才说了 Mutation 只能为同步函数，那么处理异步的时候就需要 Action了。</p>
<ul>
<li>Action 提交的是 mutation , 而不是更改 state</li>
<li>Action 可以包含任何异步操作</li>
</ul>
<p>Action接收一个<code>context</code>参数，里面包含<code>commit state getters</code>。</p>
<p>在actions里面异步提交 <code>addBookNum</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> actions = &#123;</span><br><span class="line">    addBookNumAsync(&#123;commit&#125;,options)&#123;</span><br><span class="line">        setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">            commit(<span class="string">'addBookNum'</span>,options)</span><br><span class="line">        &#125;,<span class="number">3000</span>)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p>在book.vue里通过dispatch触发。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">           addBook(options)&#123;</span><br><span class="line">               <span class="keyword">this</span>.$store.commit(<span class="string">'addBookNum'</span>, options)  <span class="comment">//&#123;name:'莎士比亚',addNum:200&#125;</span></span><br><span class="line">           &#125;,</span><br><span class="line">           addBookAsync(options)&#123;</span><br><span class="line">               <span class="built_in">console</span>.log(options);</span><br><span class="line">               <span class="keyword">this</span>.$store.dispatch(<span class="string">'addBookNumAsync'</span>,options)</span><br><span class="line">           &#125;</span><br><span class="line">       &#125;</span><br></pre></td></tr></table></figure>
<p>上面是最简单的异步处理，</p>
<blockquote>
<p>Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？</p>
<p>首先，你需要明白 <code>store.dispatch</code> 可以处理被触发的 action 的处理函数返回的 Promise，并且 <code>store.dispatch</code> 仍旧返回 Promise</p>
</blockquote>
<p>模拟一下更新书籍的操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">addNewBookAsync(&#123;commit&#125;)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">            setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">                <span class="keyword">let</span> newBook = [&#123;<span class="attr">id</span>:<span class="number">66</span>,<span class="attr">name</span>:<span class="string">'水浒'</span>, <span class="attr">number</span>:<span class="number">12</span>,<span class="attr">ishave</span>:<span class="literal">true</span>&#125;]</span><br><span class="line">                commit(<span class="string">'addNewBook'</span>,newBook)</span><br><span class="line">                resolve()</span><br><span class="line">            &#125;,<span class="number">3000</span>)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p>在book.vue里</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">addNewBook()&#123;</span><br><span class="line">               <span class="keyword">this</span>.$store.dispatch(<span class="string">'addNewBookAsync'</span>).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">                   alert(<span class="string">'更新成功'</span>)</span><br><span class="line">               &#125;)</span><br><span class="line">           &#125;</span><br></pre></td></tr></table></figure>
<p>在另外一个actions中也可以</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    <span class="keyword">return</span> dispatch(<span class="string">'actionA'</span>).then(<span class="function"><span class="params">()</span> =&gt;</span> &#123;</span><br><span class="line">      commit(<span class="string">'someOtherMutation'</span>)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>也可以使用 async/await</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 假设 getData() 和 getOtherData() 返回的是 Promise</span></span><br><span class="line"></span><br><span class="line">actions: &#123;</span><br><span class="line">  <span class="keyword">async</span> actionA (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(<span class="string">'gotData'</span>, <span class="keyword">await</span> getData())</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="keyword">async</span> actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    <span class="keyword">await</span> dispatch(<span class="string">'actionA'</span>) <span class="comment">// 等待 actionA 完成</span></span><br><span class="line">    commit(<span class="string">'gotOtherData'</span>, <span class="keyword">await</span> getOtherData())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>一个 <code>store.dispatch</code> 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。</p>
<h4 id="7-Module"><a href="#7-Module" class="headerlink" title="7.Module"></a>7.Module</h4><p>由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。</p>
<p>为了解决以上问题，Vuex 允许我们将 store 分割成<strong>模块（module）</strong>。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> moduleA = &#123;</span><br><span class="line">  state: &#123; ... &#125;,</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;,</span><br><span class="line">  getters: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> moduleB = &#123;</span><br><span class="line">  state: &#123; ... &#125;,</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</span><br><span class="line">  modules: &#123;</span><br><span class="line">    a: moduleA,</span><br><span class="line">    b: moduleB</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">store.state.a <span class="comment">// -&gt; moduleA 的状态</span></span><br><span class="line">store.state.b <span class="comment">// -&gt; moduleB 的状态</span></span><br></pre></td></tr></table></figure>
<h4 id="7-总结"><a href="#7-总结" class="headerlink" title="7.总结"></a>7.总结</h4><p>使用vuex的流程是这样的</p>
<p>action调用=&gt;mutation修改=&gt;state(发生改变的时候)=&gt;getter</p>

      

      
        
    </div>
  </div>
  
</article>



  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="index4.html">&laquo; Prev</a><a class="page-number" href="index.html">1</a><a class="page-number" href="index3.html">2</a><a class="page-number" href="index4.html">3</a><span class="page-number current">4</span>
    </nav>
  
</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
